<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Manipulation</title>
<style>
	.body1{
	padding:5px;
	border:1px solid #0000ff;
	}
</style>

<script src='../lib/jquery-2.1.1.js'></script>
<script>
$(document).ready(function(){
	$('.div1,.div2').css({
		'border':'1px solid #ff00dd',
		'width':'30px',
		'padding':'10px',
		'text-align':'center'});



	//wrap
	var w= "<div class='body1'></div>";
	
	$('.div1').wrap(w);
	
	
	//body1클래스 안쪽의 뒤에 추가
	$('.body1').append('<hr/>');
	
	//body1클래스 바깥쪽의 뒤에 추가
	$('.body1').after('<h5>.after로 삽입된 문자열</h5>');
	
	//특정 요소의 갯수
	var len=$('div').length;
	var len2=$('.body1>div').length;

	
	
	//each를 사용하여 li의 문자색을 변경
	var c=['#000000','#ff0000','#00ff00','#0000ff','#ffff00']
	$('#mnt>li').each(function(pos){
		var k=pos%5;
		$(this).css('color',c[k]);
			
	});
	

	
	
	
});	
</script>
</head>
<body>
<h3>Manipulation Example<hr/></h3>

<div class='div1'>1</div>
<div class='div1'>2</div>
<div class='div1'>3</div>


<div class='div2'>4</div>
<div class='div2'>5</div>
<div class='div2'>6</div>


<div>
	<ul id='mnt'>
		<li>백두산</li>
		<li>한라산</li>		
		<li>소백산</li>		
		<li>금강산</li>		
		<li>청계산</li>	
		<li>북한산</li>	
		<li>백두산</li>
		<li>한라산</li>		
		<li>소백산</li>		
		<li>금강산</li>		
		<li>청계산</li>	
		<li>북한산</li>	
		<li>백두산</li>
		<li>한라산</li>		
		<li>소백산</li>		
		<li>금강산</li>		
		<li>청계산</li>	
		<li>북한산</li>	
	
	
	</ul>




</div>


</body>
</html>